<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"      
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
   <ui:composition template="../TemplateAdmin.xhtml">
        <ui:define name="title">
            <h:outputText value="Elevation Management"></h:outputText>
        </ui:define>       
        <ui:define name="body">
        <h:form id="form">
            <p:growl id="messages" showDetail="true"/>
            <p:dataTable id="dataTable" var="item" value="#{elevationController.items}"
                         paginator="true" rows="10" paginatorPosition="bottom" resizableColumns="true"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15" style="width: 100dp" widgetVar="elevationTable"
                         editable="true">
                <!-- tên bảng, tiêu đề, tìm kiếm -->
                <f:facet name="header">
                    <h:outputText value="List of Elevation"/>
                    <p:outputPanel style="float: right">
                        <h:outputText value="Search by all fileds"/>
                        <h:inputText id="globalFilter" onkeyup="elevationTable.filter()"/>
                    </p:outputPanel>
                </f:facet>

                <!-- Sửa trên bảng-->

                <p:ajax event="rowEdit" listener="#{elevationController.onEdit}" update=":form:messages"/>
                <p:ajax event="rowEditCancel" listener="#{elevationController.onEditCancel}" update=":form:messages"/>

                <!-- nội dung bảng -->

                <p:column headerText="ID" sortBy="#{item.elID}" filterMatchMode="exact" filterBy="#{item.elID}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elID}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:outputText value="#{item.elID}" style="width: 100%"/>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>

                <p:column headerText="Type" sortBy="#{item.etID.etName}" 
                          filterMatchMode="exact" filterBy="#{item.etID.etName}" 
                          filterOptions="#{elevationTypeController.itemsAvailableSelectOne}"
                          >
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.etID.etName}"/>
                        </f:facet>
                        <f:facet name="input">
                            <p:selectOneMenu value="#{item.etID}">                                
                                <f:selectItems value="#{elevationTypeController.itemsAvailableSelectOne}"/>
                            </p:selectOneMenu>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>

                <p:column headerText="Name" sortBy="#{item.elName}" filterMatchMode="exact" filterBy="#{item.elName}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elName}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:outputText value="#{item.elName}" style="width: 100%"/>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>

                <p:column headerText="Price" sortBy="#{item.elCost}" filterMatchMode="exact" filterBy="#{item.elCost}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elCost}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:outputText value="#{item.elCost}" style="width: 100%"/>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>                

                <p:column headerText="Description" sortBy="#{item.elDescription}" filterMatchMode="exact" filterBy="#{item.elDescription}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elDescription}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:outputText value="#{item.elDescription}" style="width: 100%"/>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>

                <p:column headerText="Image" sortBy="#{item.elImage}" filterMatchMode="exact" filterBy="#{item.elImage}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elImage}"/>
                        </f:facet>
                        <f:facet name="input">
                            <p:fileUpload value="#{item.elImage}" style="width: 100%"/>
                        </f:facet>
                    </p:cellEditor>                    
                </p:column>

                <p:column headerText="Status" sortBy="#{item.elStatus}">
                    <p:cellEditor>
                        <f:facet name="output">
                            <h:outputText value="#{item.elStatus}"/>
                        </f:facet>
                        <f:facet name="input">
                            <h:selectBooleanCheckbox value="#{item.elStatus}" />
                        </f:facet>
                    </p:cellEditor>                    
                </p:column> 

                <p:column>
                    <p:rowEditor/>
                </p:column>

            </p:dataTable>

        </h:form>
        </ui:define>
   </ui:composition>
</html>

